import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Warehouse, Location, WarehouseOperationLog } from '../storehouse.service';
import { ToasterService } from '@abp/ng.theme.shared';
import { StorehouseService } from '../storehouse.service';

@Component({
  selector: 'app-storehouse-detail',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="detail-dialog-overlay" *ngIf="visible">
      <div class="detail-dialog">
        <div class="detail-dialog-header">
          <div class="header-title">
            <span class="title-text">优品仓库：</span>
            <span class="warehouse-code">{{warehouse?.warehouseCode}}</span>
            <i class="fas fa-copy copy-icon" (click)="copyWarehouseCode()" title="点击复制仓库编号"></i>
          </div>
          <div class="header-actions">
            <button class="btn-close" (click)="close()">
              <i class="fas fa-times"></i>
            </button>
          </div>
        </div>
        
        <div class="detail-dialog-content">
          <div class="info-header">
            <div class="info-header-item">
              <i class="fas fa-user"></i>
              <div class="info-text">
                <label>提交人</label>
                <span>{{getUserName(warehouse?.creatorId) || '-'}}</span>
              </div>
            </div>
            <div class="info-header-item">
              <i class="fas fa-clock"></i>
              <div class="info-text">
                <label>操作时间</label>
                <span>{{warehouse?.creationTime || '-'}}</span>
              </div>
            </div>
            <div class="info-header-item">
              <i class="fas fa-sync"></i>
              <div class="info-text">
                <label>更新时间</label>
                <span>{{warehouse?.lastModificationTime || '-'}}</span>
              </div>
            </div>
            <div class="info-header-item">
              <i class="fas fa-circle-check"></i>
              <div class="info-text">
                <label>状态</label>
                <span class="status-tag" [ngClass]="{
                  'status-enabled': warehouse?.warehouseStatus === '启用',
                  'status-disabled': warehouse?.warehouseStatus === '停用',
                  'status-locked': warehouse?.warehouseStatus === '锁定'
                }">{{warehouse?.warehouseStatus || '-'}}</span>
              </div>
            </div>
          </div>

          <div class="info-section">
            <h3 class="section-title">基本信息</h3>
            <div class="info-grid">
              <div class="info-item">
                <label>仓库编号</label>
                <span>{{warehouse?.warehouseCode || '-'}}</span>
              </div>
              <div class="info-item">
                <label>仓库名称</label>
                <span>{{warehouse?.warehouseName || '-'}}</span>
              </div>
              <div class="info-item">
                <label>仓库容量/m³</label>
                <span>{{warehouse?.warehouseCapacity || '0'}}</span>
              </div>
              <div class="info-item">
                <label>库管部门</label>
                <span>{{warehouse?.managementDept || '-'}}</span>
              </div>
              <div class="info-item">
                <label>仓库主管</label>
                <span>{{warehouse?.warehouseManager || '-'}}</span>
              </div>
              <div class="info-item">
                <label>联系电话</label>
                <span>{{warehouse?.phone || '-'}}</span>
              </div>
              <div class="info-item full-width">
                <label>仓库地址</label>
                <span>{{warehouse?.warehouseAddress || '-'}}</span>
              </div>
              <div class="info-item full-width">
                <label>备注</label>
                <span>{{warehouse?.remarks || '-'}}</span>
              </div>
            </div>
          </div>

          <div class="info-section">
            <div class="section-tabs">
              <div class="tab-item" [class.active]="activeTab === 'info'" (click)="activeTab = 'info'">
                仓位信息
              </div>
              <div class="tab-item" [class.active]="activeTab === 'logs'" (click)="activeTab = 'logs'">
                操作记录
              </div>
            </div>

            <div [ngStyle]="{'display': activeTab === 'info' ? 'block' : 'none'}">
              <div class="location-table">
                <table>
                  <thead>
                    <tr>
                      <th class="checkbox-column">
                        <label class="checkbox-wrapper">
                          <input type="checkbox">
                          <span class="checkbox-custom"></span>
                        </label>
                      </th>
                      <th>序号</th>
                      <th>库位编号</th>
                      <th>库位名称</th>
                      <th>库位容量/m³</th>
                      <th>库位主管</th>
                      <th>排序</th>
                      <th>库位状态</th>
                      <th>备注</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let location of locations; let i = index">
                      <td class="checkbox-column">
                        <label class="checkbox-wrapper">
                          <input type="checkbox">
                          <span class="checkbox-custom"></span>
                        </label>
                      </td>
                      <td>{{i + 1}}</td>
                      <td>{{location.locationId}}</td>
                      <td>{{location.locationName}}</td>
                      <td>{{location.capacity}}</td>
                      <td>{{location.supervisor}}</td>
                      <td>{{location.sortOrder}}</td>
                      <td>
                        <span class="status-tag" [ngClass]="{'status-enabled': location.status === 1, 'status-disabled': location.status === 0}">
                          {{location.status === 1 ? '启用' : '停用'}}
                        </span>
                      </td>
                      <td>{{location.remarks || '-'}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div [ngStyle]="{'display': activeTab === 'logs' ? 'block' : 'none'}">
              <div class="operation-search">
                <div class="search-group">
                  <i class="fas fa-filter"></i>
                  <select [(ngModel)]="logSearchParams.operationType">
                    <option value="">操作类型</option>
                    <option value="新增">新增</option>
                    <option value="修改">修改</option>
                    <option value="删除">删除</option>
                    <option value="导出">导出</option>
                    <option value="启用">启用</option>
                    <option value="停用">停用</option>
                    <option value="锁定">锁定</option>
                  </select>
                </div>
                <div class="search-group">
                  <i class="fas fa-user"></i>
                  <input type="text" [(ngModel)]="logSearchParams.operatorId" placeholder="操作人">
                </div>
                <div class="search-group">
                  <i class="fas fa-calendar"></i>
                  <input type="datetime-local" [(ngModel)]="logSearchParams.startTime">
                  <span class="date-separator">至</span>
                  <input type="datetime-local" [(ngModel)]="logSearchParams.endTime">
                </div>
                <div class="search-buttons">
                  <button class="btn-reset" (click)="resetLogSearch()">
                    <i class="fas fa-undo"></i>
                    重置
                  </button>
                  <button class="btn-search" (click)="searchLogs()">
                    <i class="fas fa-search"></i>
                    查询
                  </button>
                </div>
              </div>

              <div class="operation-table">
                <table>
                  <thead>
                    <tr>
                      <th>序号</th>
                      <th>操作类型</th>
                      <th>操作人</th>
                      <th>操作时间</th>
                      <th>操作描述</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let log of operationLogs; let i = index">
                      <td>{{i + 1}}</td>
                      <td>
                        <span class="operation-type" [class.type-add]="log.operationType === '新增'"
                                                    [class.type-edit]="log.operationType === '修改'"
                                                    [class.type-delete]="log.operationType === '删除'"
                                                    [class.type-export]="log.operationType === '导出'"
                                                    [class.type-enable]="log.operationType === '启用'"
                                                    [class.type-disable]="log.operationType === '停用'"
                                                    [class.type-lock]="log.operationType === '锁定'">
                          {{log.operationType}}
                        </span>
                      </td>
                      <td>{{log.operatorName || log.operatorId || '-'}}</td>
                      <td>{{log.operationTime}}</td>
                      <td>{{log.operationDescription}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <div class="operation-pagination">
                <span>总 {{totalLogs}} 条</span>
                <div class="page-numbers">
                  <a *ngFor="let page of logPages" 
                     [class.active]="currentLogPage === page"
                     (click)="goToLogPage(page)">{{page}}</a>
                  <span *ngIf="hasMoreLogPages">...</span>
                  <a *ngIf="hasMoreLogPages" 
                     [class.active]="currentLogPage === totalLogPages"
                     (click)="goToLogPage(totalLogPages)">{{totalLogPages}}</a>
                </div>
                <div class="page-size">
                  <select [(ngModel)]="logPageSize" (change)="onLogPageSizeChange()">
                    <option [value]="10">10条/页</option>
                    <option [value]="20">20条/页</option>
                    <option [value]="50">50条/页</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="detail-dialog-footer">
          <div class="location-count">
            <i class="fas fa-layer-group"></i>
            库位数量：{{locations?.length || 0}}
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .detail-dialog-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      backdrop-filter: blur(6px);
    }

    .detail-dialog {
      background: white;
      border-radius: 12px;
      width: 90%;
      max-width: 1200px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
      animation: dialog-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes dialog-fade-in {
      from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .detail-dialog-header {
      padding: 24px 28px;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(to right, #fafafa, #f5f5f5);
      border-radius: 12px 12px 0 0;
    }

    .header-title {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .title-text {
      font-size: 20px;
      font-weight: 600;
      color: #262626;
      letter-spacing: -0.5px;
    }

    .warehouse-code {
      color: #1890ff;
      font-weight: 500;
      background: rgba(24, 144, 255, 0.1);
      padding: 4px 12px;
      border-radius: 6px;
      font-size: 15px;
    }

    .copy-icon {
      color: #1890ff;
      cursor: pointer;
      font-size: 16px;
      transition: all 0.3s;
      padding: 8px;
      border-radius: 6px;
    }

    .copy-icon:hover {
      color: #40a9ff;
      background: rgba(24, 144, 255, 0.1);
    }

    .btn-close {
      width: 36px;
      height: 36px;
      border: none;
      background: transparent;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8c8c8c;
      transition: all 0.3s;
    }

    .btn-close:hover {
      background: rgba(0, 0, 0, 0.06);
      color: #262626;
    }

    .detail-dialog-content {
      padding: 24px;
      overflow-y: auto;
      flex: 1;
    }

    .detail-tabs {
      margin-bottom: 20px;
    }

    .tab-list {
      display: flex;
      border-bottom: 1px solid #e8e8e8;
    }

    .tab-item {
      padding: 8px 16px;
      font-size: 14px;
      cursor: pointer;
      color: #595959;
      position: relative;
      margin-right: 32px;
    }

    .tab-item.active {
      color: #1890ff;
    }

    .tab-item.active::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: #52c41a;
    }

    .tab-item:hover {
      color: #40a9ff;
    }

    .tab-content {
      flex: 1;
      overflow: auto;
    }

    .info-header {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
      padding: 24px;
      background: linear-gradient(135deg, #f8f9fa, #f0f2f5);
      border-radius: 12px;
      margin-bottom: 28px;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .info-header-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 8px;
      transition: all 0.3s;
    }

    .info-header-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .info-header-item i {
      font-size: 22px;
      color: #1890ff;
      width: 24px;
      text-align: center;
    }

    .info-text {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .info-text label {
      font-size: 13px;
      color: #8c8c8c;
      font-weight: 500;
    }

    .info-text span {
      font-size: 15px;
      color: #262626;
      font-weight: 600;
    }

    .info-section {
      background: white;
      border-radius: 12px;
      margin-bottom: 28px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      border: 1px solid #f0f0f0;
    }

    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #262626;
      margin: 0 0 20px 0;
      padding: 20px 24px;
      border-bottom: 1px solid #f0f0f0;
      background: #fafafa;
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding: 0 24px;
    }

    .section-actions {
      display: flex;
      gap: 12px;
    }

    .btn-action {
      height: 32px;
      padding: 0 16px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      background: white;
      color: #595959;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s;
    }

    .btn-action:hover {
      color: #1890ff;
      border-color: #1890ff;
      background-color: #e6f7ff;
    }

    .btn-action i {
      font-size: 14px;
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      padding: 24px;
      background: white;
    }

    .info-item {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 16px;
      background: #fafafa;
      border-radius: 8px;
      transition: all 0.3s;
    }

    .info-item:hover {
      background: #f5f5f5;
    }

    .info-item.full-width {
      grid-column: 1 / -1;
    }

    .info-item label {
      color: #8c8c8c;
      font-size: 14px;
      font-weight: 500;
    }

    .info-item span {
      color: #262626;
      font-size: 15px;
      font-weight: 500;
    }

    .location-search {
      display: flex;
      gap: 16px;
      padding: 20px 24px;
      background: #fafafa;
      border-radius: 4px;
      margin-bottom: 16px;
    }

    .search-group {
      flex: 1;
      position: relative;
    }

    .search-group i {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #bfbfbf;
      font-size: 14px;
    }

    .search-group input,
    .search-group select {
      width: 100%;
      height: 36px;
      padding: 4px 12px 4px 36px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      font-size: 14px;
      transition: all 0.3s;
    }

    .search-group input:focus,
    .search-group select:focus {
      border-color: #40a9ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
      outline: none;
    }

    .search-buttons {
      display: flex;
      gap: 12px;
    }

    .btn-reset,
    .btn-search {
      height: 36px;
      padding: 0 20px;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s;
    }

    .btn-reset {
      border: 1px solid #d9d9d9;
      background: white;
      color: #595959;
    }

    .btn-reset:hover {
      color: #40a9ff;
      border-color: #40a9ff;
    }

    .btn-search {
      border: none;
      background: #1890ff;
      color: white;
    }

    .btn-search:hover {
      background: #40a9ff;
    }

    .location-table {
      padding: 0 24px;
    }

    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
    }

    th, td {
      padding: 16px;
      text-align: left;
      font-size: 14px;
      border-bottom: 1px solid #f0f0f0;
    }

    th {
      background: #fafafa;
      font-weight: 600;
      color: #262626;
      white-space: nowrap;
      padding: 20px 16px;
    }

    td {
      color: #595959;
    }

    tr:hover td {
      background: #fafafa;
    }

    .checkbox-column {
      width: 48px;
      text-align: center;
    }

    .checkbox-wrapper {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }

    .checkbox-wrapper input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }

    .checkbox-custom {
      position: relative;
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #d9d9d9;
      border-radius: 4px;
      background: white;
      transition: all 0.3s;
    }

    .checkbox-wrapper:hover .checkbox-custom {
      border-color: #40a9ff;
    }

    .checkbox-wrapper input:checked ~ .checkbox-custom {
      background: #1890ff;
      border-color: #1890ff;
    }

    .checkbox-wrapper input:checked ~ .checkbox-custom::after {
      content: '';
      position: absolute;
      left: 4px;
      top: 1px;
      width: 6px;
      height: 10px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    .status-tag {
      display: inline-flex;
      align-items: center;
      padding: 4px 12px;
      border-radius: 6px;
      font-size: 13px;
      line-height: 1.4;
      font-weight: 500;
    }

    .status-enabled {
      background-color: #f6ffed;
      border: 1px solid #b7eb8f;
      color: #52c41a;
    }

    .status-disabled {
      background-color: #fff2f0;
      border: 1px solid #ffccc7;
      color: #ff4d4f;
    }

    .status-locked {
      background-color: #fff7e6;
      border: 1px solid #ffd591;
      color: #fa8c16;
    }

    .detail-dialog-footer {
      padding: 20px 24px;
      border-top: 1px solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(to right, #fafafa, #f5f5f5);
      border-radius: 0 0 12px 12px;
    }

    .location-count {
      font-size: 15px;
      color: #262626;
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 500;
    }

    .location-count i {
      color: #1890ff;
    }

    .operation-search {
      display: flex;
      gap: 20px;
      padding: 24px;
      background: #fafafa;
      border-radius: 12px;
      margin: 24px;
    }

    .search-group {
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .search-group i {
      color: #1890ff;
      font-size: 16px;
    }

    .search-group input,
    .search-group select {
      flex: 1;
      height: 36px;
      padding: 8px 16px;
      border: 1px solid #d9d9d9;
      border-radius: 8px;
      font-size: 14px;
      transition: all 0.3s;
      background: white;
    }

    .search-group input:hover,
    .search-group select:hover {
      border-color: #40a9ff;
    }

    .search-group input:focus,
    .search-group select:focus {
      border-color: #1890ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
      outline: none;
    }

    .date-separator {
      color: #8c8c8c;
      padding: 0 8px;
    }

    .operation-type {
      display: inline-flex;
      align-items: center;
      padding: 4px 12px;
      border-radius: 6px;
      font-size: 13px;
      line-height: 1.4;
      font-weight: 500;
    }

    .type-add {
      background-color: #e6f7ff;
      color: #1890ff;
    }

    .type-edit {
      background-color: #fff7e6;
      color: #fa8c16;
    }

    .type-delete {
      background-color: #fff1f0;
      color: #f5222d;
    }

    .type-export {
      background-color: #f6ffed;
      color: #52c41a;
    }

    .type-enable {
      background-color: #f6ffed;
      color: #52c41a;
    }

    .type-disable {
      background-color: #fff1f0;
      color: #f5222d;
    }

    .type-lock {
      background-color: #fff7e6;
      color: #fa8c16;
    }

    .operation-pagination {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      background: #fafafa;
      border-radius: 12px;
      margin: 24px;
    }

    .section-tabs {
      display: flex;
      margin-bottom: 0;
      border-bottom: 1px solid #f0f0f0;
      padding: 0 24px;
      background: #fafafa;
    }

    .section-tabs .tab-item {
      padding: 16px 24px;
      font-size: 15px;
      cursor: pointer;
      color: #595959;
      position: relative;
      margin-right: 32px;
      font-weight: 500;
      transition: all 0.3s;
    }

    .section-tabs .tab-item:hover {
      color: #1890ff;
    }

    .section-tabs .tab-item.active {
      color: #1890ff;
    }

    .section-tabs .tab-item.active::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: #1890ff;
      border-radius: 2px;
    }

    .page-numbers {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .page-numbers a {
      min-width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      font-size: 14px;
      color: #595959;
      cursor: pointer;
      transition: all 0.3s;
      border: 1px solid transparent;
    }

    .page-numbers a:hover {
      color: #1890ff;
      background: rgba(24, 144, 255, 0.1);
    }

    .page-numbers a.active {
      background: #1890ff;
      color: white;
      font-weight: 500;
    }

    .page-size select {
      height: 32px;
      padding: 4px 12px;
      border: 1px solid #d9d9d9;
      border-radius: 6px;
      font-size: 14px;
      color: #595959;
      cursor: pointer;
      transition: all 0.3s;
      background: white;
    }

    .page-size select:hover {
      border-color: #40a9ff;
    }
  `]
})
export class StorehouseDetailComponent {
  @Input() visible = false;
  @Input() warehouse?: Warehouse;
  @Input() locations?: Location[];
  @Input() userNames: { [key: string]: string } = {};
  @Output() visibleChange = new EventEmitter<boolean>();
  
  // 操作记录相关
  operationLogs: WarehouseOperationLog[] = [];
  totalLogs = 0;
  currentLogPage = 1;
  logPageSize = 10;
  totalLogPages = 1;
  logPages: number[] = [];
  hasMoreLogPages = false;

  logSearchParams = {
    operationType: '',
    operatorId: '',
    startTime: '',
    endTime: ''
  };

  activeTab: 'info' | 'logs' = 'info';

  constructor(
    private toaster: ToasterService,
    private storehouseService: StorehouseService
  ) {}

  ngOnInit() {
    this.loadOperationLogs();
  }

  loadOperationLogs() {
    if (!this.warehouse?.id) {
      return;
    }

    const params = {
      warehouseId: this.warehouse.id,
      skipCount: (this.currentLogPage - 1) * this.logPageSize,
      maxResultCount: this.logPageSize,
      ...this.logSearchParams
    };

    this.storehouseService.getOperationLogs(params).subscribe({
      next: (response) => {
        // 只保留当前仓库的操作记录
        const filteredItems = response.items.filter(item => item.warehouseId === this.warehouse?.id);
        this.operationLogs = filteredItems.map(log => ({
          ...log,
          operatorName: log.operatorName || (log as any).operator || log.operatorId || '-'
        }));
        this.totalLogs = filteredItems.length;  // 更新总数为过滤后的数量
        this.calculateLogPagination();
      },
      error: (error) => {
        console.error('Failed to load operation logs:', error);
        this.toaster.error('加载操作记录失败，请稍后重试');
      }
    });
  }

  calculateLogPagination() {
    this.totalLogPages = Math.ceil(this.totalLogs / this.logPageSize);
    this.logPages = [];
    
    if (this.totalLogPages <= 7) {
      for (let i = 1; i <= this.totalLogPages; i++) {
        this.logPages.push(i);
      }
      this.hasMoreLogPages = false;
    } else {
      if (this.currentLogPage <= 3) {
        this.logPages = [1, 2, 3, 4, 5];
        this.hasMoreLogPages = true;
      } else if (this.currentLogPage >= this.totalLogPages - 2) {
        this.logPages = [
          this.totalLogPages - 4,
          this.totalLogPages - 3,
          this.totalLogPages - 2,
          this.totalLogPages - 1,
          this.totalLogPages
        ];
        this.hasMoreLogPages = true;
      } else {
        this.logPages = [
          this.currentLogPage - 2,
          this.currentLogPage - 1,
          this.currentLogPage,
          this.currentLogPage + 1,
          this.currentLogPage + 2
        ];
        this.hasMoreLogPages = true;
      }
    }
  }

  goToLogPage(page: number) {
    if (page !== this.currentLogPage && page > 0 && page <= this.totalLogPages) {
      this.currentLogPage = page;
      this.loadOperationLogs();
    }
  }

  onLogPageSizeChange() {
    this.currentLogPage = 1;
    this.loadOperationLogs();
  }

  searchLogs() {
    this.currentLogPage = 1;
    this.loadOperationLogs();
  }

  resetLogSearch() {
    this.logSearchParams = {
      operationType: '',
      operatorId: '',
      startTime: '',
      endTime: ''
    };
    this.searchLogs();
  }

  getUserName(userId?: string): string {
    if (!userId) return '-';
    return this.userNames[userId] || userId || '-';
  }

  close() {
    this.visible = false;
    this.visibleChange.emit(false);
  }

  copyWarehouseCode() {
    if (this.warehouse?.warehouseCode) {
      navigator.clipboard.writeText(this.warehouse.warehouseCode)
        .then(() => {
          this.toaster.success('仓库编号已复制到剪贴板');
        })
        .catch(() => {
          this.toaster.error('复制失败，请手动复制');
        });
    }
  }
} 